9

引言:最近想将这几个月做过的东西组件化,然后首先想到的是 编码规范化!本文只涉及 CSS 命名规范,搬来了Alloyteam 造好的轮子。可能并不完全适用,在以后开发过程中再根据需要进行修改。╮(╯_╰)╭

1.常用的css命名规范

  • 头:header
  • 内容:content/container
  • 尾:footer
  • 导航:nav
  • 侧边:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:friendlink
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guild
  • 服务:service
  • 注册:regsiter
  • 状态:status
  • 投票:vote
  • 合作伙伴:partner

2.注释的写法

/* Footer */

内容区

/* End Footer */

3.id的命名

3.1 页面结构

  • 容器: container
  • 页头:header
  • 内容:content/container
  • 页面主体:main
  • 页尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper
  • 左右中:left right center

3.2 导航

  • 导航:nav
  • 主导航:mainnav
  • 子导航:subnav
  • 顶导航:topnav
  • 边导航:sidebar
  • 左导航:leftsidebar
  • 右导航:rightsidebar
  • 菜单:menu
  • 子菜单:submenu
  • 标题: title
  • 摘要: summary

3.3 功能

  • 标志:logo
  • 广告:banner
  • 登陆:login
  • 登录条:loginbar
  • 注册:regsiter
  • 搜索:search
  • 功能区:shop
  • 标题:title
  • 加入:joinus
  • 状态:status
  • 按钮:btn
  • 滚动:scroll
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 当前的: current
  • 小技巧:tips
  • 图标: icon
  • 注释:note
  • 指南:guild
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 投票:vote
  • 合作伙伴:partner
  • 友情链接:link
  • 版权:copyright

4.class的命名

4.1 颜色

使用颜色的名称或者十六进制。

举例:

.red{color:red;}
.f60{color:#f60;}
.ff8600{color:#ff8600;}

4.2 字体大小

直接使用 font+字体大小 作为名称。

举例:

.font12px{font-size:12px;}
.font9pt{font-size:9pt;}

4.3 对齐样式

使用对齐目标的英文名称。

举例:

.left{float:left;}
.bottom{float:bottom;}

4.4 标题栏样式

使用 类别+功能 的方式命名。

举例:

.barnews{}
.barproduct{}

5.注意事项

  1. 一律小写;
  2. 尽量用英文;
  3. 不加中杠和下划线;
  4. 尽量不缩写,除非一看就明白的单词。

6.常用css文件命名

  • 主要的 master.css
  • 模块 module.css
  • 基本共用 base.css
  • 布局,版面 layout.css
  • 主题 themes.css
  • 专栏 columns.css
  • 文字 font.css
  • 表单 forms.css
  • 补丁 mend.css
  • 打印 print.css

后记:搬到最后,看到注意事项里面的一条:不加中杠和下划线。Σ(っ °Д °;)っ有点接受不了。。。然后继续搜索,发现一个好东西—— BEM!然后,我放下最后一块砖头,滚去学习了,再见(。・_・)/~~~


参考资料


omgdog
2.4k 声望332 粉丝

科科。